<template>
  <div class="wrapper">
        <!-- v-bind和v-on实现了双向绑定实现了双向数据绑定 -->
    <input type="text" v-bind:value="name" v-on:input="name = $event.target.value" />
    <!-- 或者 -->
    <input type="text" :value="name" @input="name = $event.target.value">
    <!-- v-model是v-bind和v-on的语法糖，即，v-model算是v-band和v-on的简洁写法。 -->
    <input type="text" v-model="name">
    {{ name }}
  </div>
</template>

<script>
export default {
  name:"DemoComponent",
  components:{},
  props:{},
  data(){
    return {
      name: 'demo'
    }
  },
  watch:{},
  computed:{},
  methods:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
.wrapper{}
</style>